<!-- 上传商品单规格新增属性弹出框组件 -->
<template>
  <el-dialog title="" :visible.sync="centerDialogVisible" width="25%" center>
    <div>
      <el-form class="layout" ref="form" :model="attribut" label-width="90px">
        <el-form-item label="属性名称" class="labelm">
          <el-select
            ref="newAttributename"
            v-model="attribut.attributId"
            placeholder="请选择属性名称"
            clearable
            allow-create
            filterable
            :filter-method="dataFilter"
          >
            <el-option
              v-for="(item, index) in AttributeData"
              :key="index"
              :label="item.attr_name"
              :value="item.attr_id"
            />
          </el-select>

          <!-- <el-input
          ref="newAttribute"
          v-model="attribut.attributId"
          maxlength="10"
          show-word-limit
        ></el-input> -->
        </el-form-item>
        <!-- <el-form-item style="margin: 0px 0px 10px 15px" label="是否索引" class="labelm">
        <el-radio-group v-model="attribut.resource">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item> -->
        <el-form-item label="属性值" class="labelm">
          <el-select
            ref="newAttributevalue"
            v-model="attribut.attributValue"
            placeholder="请选择属性值"
            clearable
            allow-create
            filterable
          >
            <el-option
              v-for="(item, index) in AttributeDataValue"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
          <!-- <el-input
          ref="newAttributevalue"
          v-model="attribut.attributValue"
          maxlength="20"
          show-word-limit
        ></el-input> -->
        </el-form-item>
          <div class="footer_button">
            <el-button @click="noClose">取消</el-button>
            <el-button type="primary" @click="yesClose">确定</el-button>
          </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "addAttriBute",
  data() {
    return {
      centerDialogVisible: false, // 对话框默认关闭
      AttributeDataValue: "", // 属性值
      AttributeData: "", // 属性名称下拉
      value: "",
      attribut: {
        attributId: "", // 属性Id
        attributName: "", // 属性名称
        isIndexes: "", // 是否索引
        attributValue: "", // 属性值
      },
    };
  },
  watch: {
    "attribut.attributId"(nvalue, ovalue) {
      this.attribut.attributValue = "";
      this.valueAttrbute();
    },
  },
  methods: {
    show() {
      this.valueAttrbute();
      this.centerDialogVisible = true;
    },
    yesClose() {
      if(this.attribut.attributName === "") {
        this.attribut.attributName = this.attribut.attributId; // 新创建的词条赋值 attributName
      }
      this.$emit("attributValue", this.attribut);
      // 将数据进行上传
      let param = {
        kw: this.attribut.attributId,
        value: this.attribut.attributValue,
      };
      this.$axios({
        method: "post",
        url: "goods/add_goods_attribute",
        params: param,
      }).then(function () {
        // 事件执行成功
        console.log("上传成功!");
      });
      this.centerDialogVisible = false;
      this.dataReset();
    },
    noClose() {
      this.centerDialogVisible = false;
      this.dataReset();
    },
    // 重置data全部属性
    dataReset() {
      Object.assign(this.$data, this.$options.data());
    },
    // 实时监听属性名称创建词条
    dataFilter(val) {
      this.value = val;
      if (val) {
        //val存在
        this.$axios({
          url: "goods/goods_attribute_list",
          methods: "post",
          params: { kw: val },
        }).then((res) => {
          this.AttributeData = res.data.data;
        });
      } else {
        // val不存在
        this.AttributeData = [];
        this.AttributeDataValue = [];
      }
    },
    // 根据键入内容实时更新属性名称下拉数据
    getAttribute() {
      let param = {
        kw: this.attribut.attributId,
      };
      this.$axios({
        url: "goods/goods_attribute_list",
        methods: "post",
        params: { param },
      }).then((res) => {
        this.AttributeData = res.data.data;
      });
    },
    // 根据属性名称筛选属性值数据
    valueAttrbute() {
      this.AttributeDataValue = [];
      if (this.attribut.attributId != "") {
        for (let i = 0; i < this.AttributeData.length; i++) {
          // 通过属性名称id寻找属性值
          if (this.attribut.attributId === this.AttributeData[i].attr_id) {
            this.attribut.attributName = this.AttributeData[i].attr_name;
            this.AttributeDataValue = this.AttributeData[i].values;
          }
        }
      } else {
        this.AttributeDataValue = this.AttributeData;
      }
    },
  },
};
</script>
<style>
.layout .el-form-item label {
  width: 57px;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #111111;
}
.layout .labelm {
  margin: 20px 0px;
}
.layout .el-input {
  width: 258px !important;
}
/* 单选按钮 */
.layout .el-radio-group {
  margin-left: 20px;
}
.layout .el-input__inner {
  width: 258px !important;
  height: 37px !important;
  background: #ffffff;
  border: 1px solid #bebebe;
  border-radius: 4px;
}
/************************************************************************************* 按钮 *******************************************************************************/
.footer_button {
  text-align: center;
}
/* 确认按钮 */
.layout .el-button--primary {
  width: 100px;
  height: 38px;
  line-height: 0px;
  background: #436af2;
  border-radius: 5px;
  margin-right: 30px;
}
/* 取消按钮 */
.layout .el-button--default {
  width: 100px;
  height: 38px;
  line-height: 0px;
  border-radius: 5px;
  border: 1px solid #DCDFE6;

}
.layout .el-button--primary span {
  width: 29px;
  height: 14px;
  font-size: 14px;
  padding-top: -33px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
</style>